import { useRef } from 'react'
import useClock from '../hooks/useClock'

function Clock() {
  const clockRef = useRef(null)

  const { handleMouseDown, fontSize, fontColor, fontStyle, showTime } = useClock(clockRef)

  return (
    <div data-tauri-drag-region className="grid grid-cols-1 place-items-center">
      <div
        ref={clockRef}
        onMouseDown={() => handleMouseDown()}
        style={{
          fontSize: fontSize,
          color: fontColor,
          fontFamily: fontStyle,
          fontWeight: '600',
          textAlign: 'center',
          cursor: 'default',
        }}>
        {showTime}
      </div>
    </div>
  )
}

export default Clock
